<template>
	<view class="page-index">
		<!-- 租房列表 -->
		<view class="list-box">
			<view class="list-item" v-for="(item,index) in homeList" :key="index" @click="details(item)">
				<view class="image-box">
					<image :src="item.images" mode="" class="image"></image>
				</view>
				<view class="content">
					<view class="title">
						<text class="title-item">{{item.title}}</text>
						<view class="size">
							{{item.acreage?item.acreage+'m²':''}} {{item.size?item.size:''}} {{item.pay?item.pay:''}}
						</view>
					</view>
					<view style="display: flex;">
						<view class="type" style="margin-right: 16rpx;">
							{{item.tentype}}
						</view>
						<view class="type" v-if="item.tentype_id==9||item.tentype_id==10">
							{{item.type==1?'出租':'出售'}}
						</view>
					</view>
					
					<view class="money">
						{{item.rent}}
						<!-- <text v-if="item.type==1">{{item.rent}}元/月</text>
						<text v-if="item.type==2&&item.tentype_id!=5">{{item.rent}}元/㎡</text>
						<text v-if="item.type==2&&item.tentype_id==5">{{item.rent}}万元</text> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			homeList: Array
		},
		name: "homeList",
		data() {
			return {};
		},
		methods: {
			details(item) {
				uni.navigateTo({
					url: `/pages/home/details/details?id=${item.id}`
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-index {
		.list-box {

			.list-item {
				height: 192rpx;
				display: flex;
				justify-content: flex-start;
				margin-top: 44rpx;

				.image-box {
					.image {
						width: 234rpx;
						height: 100%;
						border-radius: 16rpx;
					}
				}

				.content {
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-family: PingFang SC-Medium, PingFang SC;

					.title {
						font-size: 32rpx;
						font-weight: 700;
						color: #202020;


						.title-item {
							overflow: hidden;

							text-overflow: ellipsis;

							display: -webkit-box;

							-webkit-box-orient: vertical;

							-webkit-line-clamp: 1;
						}

						.size {
							margin-top: 12rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #202020;
							opacity: 0.5;
						}
					}

					.type {
						border-radius: 8rpx;
						height: 36rpx;
						font-size: 26rpx;
						text-align: center;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #9E9E9E;
						line-height: 36rpx;
						border: 1px solid #9E9E9E;
						width: 122rpx;
					}

					.money {
						font-weight: 700;
						font-size: 28rpx;
						color: #BB2F2F;

					}
				}
			}

		}
	}
</style>
